<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商城首页</title>
  <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="css/login-ti.css">
  <script src="js/axios.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .bg-top {
      box-sizing: border-box;
      padding-top: 20px;
      height: 120px;
      padding-left: 20px;
      background-image: url(img/bg-top.png);
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      justify-content: space-between;
      color: white;
      font-size: 20px;

    }

    .bg-top ul {
      display: flex;
    }

    .bg-top ul li {
      list-style: none;
    }

    .top-left li:nth-child(1) {
      width: 297px;
      height: 39px;
      background-image: url(img/ico-menu.png);
      background-repeat: no-repeat;
      background-position: -3px -148px;

    }

    .top-left li:nth-child(2) {
      width: 310px;
      height: 28px;
      background-color: #363636;
      margin-left: 10px;
      margin-top: 4px;

    }

    .top-left li:nth-child(2) a {
      font-size: 14px;
      color: orange;
      text-decoration: none;


    }

    .top-right li {
      margin-right: 30px;
    }

    .top-right a {
      color: white;
      text-decoration: none;
    }

    .top-right li:nth-child(2) span:nth-of-type(1) {
      display: inline-block;
      width: 28px;
      height: 25px;
      background-image: url(img/ico-menu.png);
      background-position: -2px -13px;
      vertical-align: middle;
    }

    .top-right li:nth-child(2) span:nth-of-type(2) {
      font-size: 12px;
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      text-align: center;
      line-height: 20px;
      background-color: orange;
      color: white;
    }

    .top-right li:nth-child(3) span {
      display: inline-block;
      width: 28px;
      height: 25px;
      background-image: url(img/ico-menu.png);
      background-position: -32px 27px;
      vertical-align: middle;

    }

    .top-right li:nth-child(4) span {
      display: inline-block;
      width: 28px;
      height: 25px;
      background-image: url(img/ico-menu.png);
      background-position: 2px -40px;
      vertical-align: middle;
    }

    .top-f {
      width: 100%;
      height: 48px;
      background-color: #711613;
      position: absolute;
      bottom: -4px;
      left: 0;
      z-index: 1;
    }

    li {
      list-style: none;
    }

    .top {
      /* height: 120px; */
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
    }

    /* .top-right li {
      width: 25%;

    } */
    .top-f {
      display: flex;
      line-height: 48px;
      justify-content: space-between;
    }

    .top-f ul:nth-child(1) {
      width: 60%;
      display: flex;
      justify-content: space-evenly;
      color: white;
      font-size: 18px;
    }

    .top-f ul:nth-child(1) a {
      color: white;
    }

    .top-f ul:nth-child(1) a:hover {
      color: #f94915;
      font-weight: 700;
    }

    .top-f ul:nth-child(1) li:nth-child(1) a {
      color: #f94915;
      font-weight: 700;
    }

    .top-f ul:nth-child(2) input {
      width: 250px;
      height: 30px;
      font-size: 18px;
      outline: none;
      color: white;
      border: 1px solid rgb(194, 193, 193);
      background-color: rgba(255, 255, 255, 0);
    }


    .top-f ul:nth-child(2) li {

      position: relative;
    }

    .top-f ul li:nth-child(2),
    .top-f ul li:nth-child(5) {
      position: relative;
    }

    .top-f ul li:nth-child(2)::after,
    .top-f ul li:nth-child(5)::after {
      content: 'new';
      width: 26px;
      height: 10px;
      line-height: 10px;
      text-align: center;
      font-size: 12px;
      background-color: #149e33;
      color: white;
      position: absolute;
      right: -26px;
      top: 16px;
    }

    .top-f ul li:nth-child(3) {
      position: relative;
    }

    .top-f ul li:nth-child(3)::after {
      content: 'HOT';
      width: 26px;
      height: 12px;
      line-height: 12px;
      text-align: center;
      font-size: 12px;
      background-color: #fd2e17;
      color: white;
      position: absolute;
      right: -26px;
      top: 16px;
    }

    .top-f ul:nth-child(2) input:focus {
      color: white;
    }

    .top-f ul:nth-child(2) span {
      position: absolute;
      right: 0;
      top: 9px;
      width: 50px;
      height: 30px;
      background-color: orange;
      background-image: url(img/ico-menu.png);

      background-position: 14px 58px;
    }

    /* 联系客服 */
    .spr-service {
      width: 80px;
      height: 110px;
      border-radius: 10px;
      border: 1px solid #999;
      background-color: rgb(255, 255, 255);
      position: fixed;
      right: 5px;
      top: 280px;
      z-index: 20;
      text-align: center;
    }

    .spr-service:hover {
      color: white;
      background-color: #000;

    }

    .spr-service:hover.spr-service p:nth-child(1) {
      width: 50px;
      height: 80px;
      margin: 0 auto;
      background-image: url(img/spr-service.png);
      background-position: -44px 24px;
      background-repeat: no-repeat;
    }

    .spr-service p:nth-child(1) {
      width: 80px;
      height: 80px;
      background-image: url(img/spr-service.png);
      background-position: 18px 22px;
      background-repeat: no-repeat;
    }



    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: rgb(255, 255, 255);
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      background-position: center;
      background-size: 100% 100%;
    }

    .bgimg {
      width: 100%;
      height: 70%;
      position: relative;
      top: 124px;
      left: 0;
    }

    main ul {
      display: flex;

    }

    main li {
      width: 25%;
      background-color: #fff;
      text-align: center;
      position: relative;
    }

    main li::before {
      content: '';

      width: 21%;
      height: 18%;
      background-image: url(img/new.png);
      background-size: 100%;
      position: absolute;
      left: 30px;
      top: 0;

    }

    main li p {

      font-size: 14px;
      font-weight: 700;
    }

    main li img {
      width: 100%;

    }

    a {
      text-decoration: none;

    }

    /*  */
    footer {

      margin-top: 50px;

    }

    .footer-top {

      display: flex;
      justify-content: space-between;
      width: 800px;
      margin: 0 auto;
    }

    .footer-top a {
      font-size: 16px;
      color: #000000;
    }

    .footer-top p:nth-child(1) span,
    .footer-top p:nth-child(2) span,
    .footer-top p:nth-child(3) span {
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      color: white;
      border-radius: 50px;
      background-color: #ee3029;
      vertical-align: middle;
    }

    .footer-main {
      margin-top: 50px;
      box-sizing: border-box;
      padding: 40px;
      background-color: #f6f6f6;
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px;
    }

    .footer-main a {
      color: #666666;
      font-size: 12px;
    }

    .footer-main dl dt a {
      color: #000000;
      font-size: 18px;
    }

    .footer-main dl dt {
      margin-left: -20px;
    }

    .footer-main dl {
      line-height: 20px;
    }

    .footer-main dd:hover {
      text-decoration: underline;
    }

    .footer-main dl dt:hover {
      text-decoration: underline;
    }


    /*  */
    .footer-ab {

      width: 1000px;
      box-sizing: border-box;
      padding: 20px 0;

      margin: 0 auto;
      border: 1px solid black;
      border-left: none;
      border-right: none;
    }

    .footer-ab ul {
      width: 600px;
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
    }

    /*  */
    .footer-text {
      margin-top: 30px;
      box-sizing: border-box;
      padding-bottom: 30px;
    }

    .footer-text ul {
      width: 900px;
      margin: 0 auto;
      display: flex;


    }

    .footer-text ul li:nth-child(1) span:nth-child(1) {
      display: inline-block;
      width: 120px;
      height: 40px;
      background-image: url(img/base.png);
      background-position: 0 42px;


    }

    .footer-text ul li:nth-child(1) span:nth-child(2) {
      display: inline-block;
      width: 120px;
      height: 40px;
      background-image: url(img/base.png);
      background-position: -118px 42px;


    }

    .footer-text ul li:nth-child(1) {
      position: relative;
      display: flex;
    }

    .footer-text ul li:nth-child(1)::after {
      content: "";
      width: 2px;
      height: 30px;
      background-color: rgba(94, 94, 94, 0.781);
      position: absolute;
      right: -7px;
      top: 3px;
    }

    .footer-text ul li:nth-child(2) {

      font-size: 12px;

    }



    .footer-text ul li:nth-child(3) img {
      vertical-align: baseline;
      width: 80px;
      height: 40px;
    }

    .footer-text ul li {
      margin-left: 20px;
    }

    .top-left li:nth-child(2) {
      position: relative;
      overflow: hidden;
    }

    .top-left li:nth-child(2) a {
      position: absolute;
      left: 0;
      top: 4px;
    }

    a {
      color: #000;
    }

    .hide1 {
      display: none;
      box-sizing: border-box;
      padding: 10px;
      background-color: #181a20;
      border-top: 3px solid #f94915;
      width: 180px;
      position: absolute;
      left: -50px;
      top: 48px;



    }

    .hide2 {
      height: 100px;
    }

    .top-f ul li {
      position: relative;
    }

    .hide1 p {
      height: 20px;
      line-height: 20px;
      /* background-color: #181a20; */
    }

    .hide1 p:last-child img {
      width: 50px;
    }

    .hide1 p:last-child {
      position: absolute;
      top: 30px;
      right: 30px;
    }

    .hide1 p a {
      font-size: 12px;
    }

    .top-right {
      position: relative;
    }

    .top-right li:nth-child(5) a {
      font-size: 14px;


    }

    .top-right li:nth-child(5) {
      position: absolute;
      left: 56px;
      top: 26px;
      /* background-color: rgba(22, 20, 20, 0.658); */
      /* display: none; */

    }
  </style>
</head>

<body>

  <div class="top">
    <div class="bg-top">
      <ul class="top-left">
        <li></li>
        <li>
          <a href="#">北京地区暂停发货说明，点击查看详情></a>
        </li>
      </ul>
      <ul class="top-right">
        <li class="log-btn"><a href="#">你好，请登录</a><a href="#" class="quit"></a></li>

        <li><a href="shoppingCart.html"><span></span> 购物车 <span class="Product-num">0</span></a></li>
        <li><a href="#"> <span></span>领取中心</a></li>
        <li><a href="#"> <span></span>微信商城</a></li>
        <li><a href="#">退出</a></li>
      </ul>


    </div>
    <div class="top-f">
      <ul>
        <li><a href="#" class="top-f-active"> 商城首页</a></li>
        <li class="show">
          <a href="shouban.html"> 雕塑手办</a>
          <div class="hide1">
            <p><a href="#">大型雕塑</a></p>
            <p><a href="#">中型雕塑</a></p>
            <p><a href="#">限定手办</a></p>
            <p><a href="#">迷你手办</a></p>
            <p><a href="#">手办</a></p>
            <p><img src="img/霞.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="plushToy.html"> 服饰毛绒</a>

          <div class="hide1">
            <p><a href="#">毛绒玩偶</a></p>
            <p><a href="#">卫衣&夹克</a></p>
            <p><a href="#">T恤</a></p>
            <p><a href="#">K/DA服饰</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/佐伊111.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="Life.html"> 生活周边</a>

          <div class="hide1 ">
            <p><a href="#">3C配件</a></p>
            <p><a href="#">日常用品</a></p>
            <p><a href="#">海报艺术</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/哥哥.webp" alt=""></p>
          </div>
        </li>
        <li><a href="Brand.html"> 品牌联名</a></li>
        <li class="show"><a href="Promotion.html"> 促销专区</a>

          <div class="hide1 hide2">
            <p><a href="#">LPL系列专区</a></p>
            <p><img src="img/didi.webp" alt=""></p>
          </div>
        </li>
        <li><a href="#"> 手办收藏</a></li>
      </ul>
      <ul>
        <li>

          <input type="text" placeholder="洛与霞雕塑"><span></span>
        </li>
      </ul>
    </div>
  </div>

  <div class="spr-service">
    <p></p>
    <p>联系客服</p>
  </div>

  <!-- 轮播图 -->
  <div class="bgimg">


    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(img/bg1.webp)"></div>
        <div class="swiper-slide"
          style="background-image:url(https://game.gtimg.cn/images/daojushop/zb/ad/202202/20220218174341_621642.jpg)">
        </div>
        <div class="swiper-slide"
          style="background-image:url(https://game.gtimg.cn/images/daojushop/zb/ad/202203/20220307194806_123231.jpg)">
        </div>
        <div class="swiper-slide"
          style="background-image:url(https://game.gtimg.cn/images/daojushop/zb/ad/202202/20220221094053_384390.jpg)">
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Arrows -->
      <!-- <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div> -->
    </div>
    <main>
      <ul>
        <!-- <li>
          <p><img src="img/霞.webp" alt=""></p>
          <p>洛与霞雕塑 预定专享周边福利</p>
        </li>
        <li>
          <p><img src="img/霞.webp" alt=""></p>
          <p>新品魄罗XL手办系列甜蜜上新</p>
        </li>
        <li>
          <p><img src="img/霞.webp" alt=""></p>
          <p>开天联名款-无双剑姬 菲奥娜 1/4大型雕塑预售</p>
        </li>
        <li>
          <p><img src="img/霞.webp" alt=""></p>
          <p>联名款星之守护者佐伊雕塑预售开启</p>
        </li> -->
      </ul>

    </main>


    <footer>
      <div class="footer-top">
        <p><a href=""><span>7</span> 7天无理由退换货</a></p>
        <p><a href=""><span>正</span>100%官方正品</a></p>
        <p><a href=""><span>免</span>全场每单满299元包邮</a></p>

      </div>

      <div class="footer-main">
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
      </div>

      <div class="footer-ab">
        <ul>
          <li> 关于商城 </li>
          <li> 服务条款 </li>
          <li> 合作伙伴 </li>
          <li> 法律声明 </li>
          <li> 经营者证照信息 </li>
        </ul>
      </div>

      <div class="footer-text">
        <ul>
          <li>
            <span></span>
            <span></span>
          </li>
          <li>
            北京京东世纪贸易有限公司提供客服支持 | 售后服务： https://wj.qq.com/s2/9280963/12ea
            Copyright (C) 1998 – 2018 Tencent. All Rights Reserved.腾讯公司 版权所有
          </li>
          <li>
            <img src="img/工商.png" alt="">
          </li>
        </ul>
      </div>
    </footer>


  </div>

  <!-- login -->
  <div class="box-log">
    <div class="box-position">
      <ul class="log-top">
        <li class="log-top-active">QQ账号登录</li>
        <li id="w-99">微信账号登录</li>
      </ul>
      <ul class="log-main">
        <li class="log-main-active">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p>推荐使用快速安全登录，防止盗号。</p>
          <div class="login-qq">
            <input type="text" id="user" placeholder="账号"><span class="s1"></span><br>
            <input type="text" id="pawd" placeholder="密码"><span class="s2"></span><br>
            <input type="button" value="授权登录" id="btn">
          </div>
          <p class="fool-text">
            <a href="">忘记密码</a>
            <a href="register.html">注册新账号</a>
            <a href="" class="last">意见反馈</a>
          </p>
        </li>
        <li class="erweima">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p><img src="img/er.jpg" alt=""></p>
          <p>微信扫一扫</p>
          <p>“聚诚品”</p>
        </li>
      </ul>

    </div>
  </div>








  <script src="js/swiper-3.4.2.min.js"></script>
  <script src="js/jq.js"></script>
  <script src="js/login-ti.js"></script>
  <script src="js/islogin.js"></script>
  <script>


    let tuichu = document.querySelector('.top-right li:nth-child(5)')
    tuichu.onclick = function () {
      let uid1 = localStorage.getItem("uid");
      if (!uid1) {
        alert('请您先登录');
      } else {
        localStorage.removeItem("uid");
        location.href = 'index.html';
      }
    }

    var swiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: '.swiper-pagination',
      paginationClickable: '.swiper-pagination',
      // nextButton: 'null',
      // prevButton: '.swiper-button-prev',
      spaceBetween: 30,
      effect: 'fade',
      autoplay: 5000,

    });



    let url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=4&pagenum=0"

    axios.get(url, {
      params: {
        uid: 96839
      }
    })
      .then((res) => {

        console.log(res.data.data)
        let listArr = res.data.data.map((v) => `
    <li> 
          <a href="productDetails.html?pid=${v.pid}">
          <p><img src="${v.pimg}" alt=""></p>
          <p>${v.pname}</p>
         
          </a>
    </li>
    `)

        document.querySelector('main ul').innerHTML = listArr.join('');
      })

      //hover 显示
    let hides = document.querySelectorAll('.hide1');
    console.log(hides);
    let shows = document.querySelectorAll('.show');
    console.log(shows);
    shows.forEach(function (v, i) {
      v.onmouseenter = function () {
        hides[i].style.display = 'block';
      }
      v.onmouseleave = function () {
        hides[i].style.display = 'none';
      }
    })

  </script>

</body>

</html>